<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        formItemWidth="120px"
        :formColumns="formItemList"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <basic-table
        showActionCol
        :showSelectCol="false"
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :tableHeight="480"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
        <div slot="content_context">
          <!-- 按钮操作栏 -->
          <BtnRender :render="renderBtnsBar" />
        </div>
      </basic-table>
    </el-card>
  </div>
</template>
<script>
import { getBtnsId } from '@/libs/btnsPermission';
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import BtnRender from '@/components/JSXRender/BtnRender';
import basePage from '@/mixins/commodity/basePage';
import { getBtnsBar, getTableAction } from '@/utils/getBtnsRender';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants';
import { getSearchParamBySearchType } from '@/utils/getUtils';
import { generateUuid, createExcelByExport } from '@/utils/bizUtils'
import {
  queryPriceAdjustmentListService,
  submitPriceAdjustmentService,
  exportPriceAdjustmentService
} from '@/api/finance/purchasePriceManage/priceAdjustmentNotice';
export default {
  mixins: [basePage],
  components: {
    BasicForm,
    BasicTable,
    BtnRender
  },
  data () {
    return {
      formItemList: FORM_ITEMS,
      formData: {
        createOpeTime: '', // 创建日期
        recodeNo: '', // 子单据号
        state: '', // 状态
        priceChangeAreaName: '', // 调价区域
        willChangeTime: '', // 预计调价日期
        changeTime: '', // 接收日期
        changeDepartName: '', // 接收部门
        storeNo: '', // 供应商代码
        storeName: '', // 供应商名称
        storeManagerAreaName: '', // 供应商管理区域
        skuNo: '', // SKU编码
        productName: '', // 商品名称
        productManagerArea: '', // 商品管理区域
        changeNo: '', // 调价单号
      },
      tableInfo: {
        list: [],
        columns: TABLE_COLUMNS,
        loading: false
      },
      btnLoading: {
        export: false
      }
    }
  },
  mounted () {
    this.handleQueryForm();
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const btnsBar = [
        {
          label: '新增',
          method: this.handleAdd,
          icon: 'el-icon-circle-plus-outline',
          hasAuth: true,
          type: 'primary',
          size: 'mini'
        },
        {
          label: '导出',
          method: this.handleExport,
          icon: 'el-icon-download',
          loading: this.btnLoading.export,
          hasAuth: true,
          type: 'primary',
          size: 'mini'
        }
      ];
      return getBtnsBar(h, btnsBar, this.showBtn, 'start');
    },
    // 渲染表格按钮
    renderTableBtnAction (h, { row }) {
      const stateByBtn = {
        '1': { label: '提交', method: this.handleSubmit, hasAuth: true },
        '2': { label: '处理', method: this.handleDispose, hasAuth: true },
        '3': { label: '审核', method: this.handleAudit, hasAuth: true },
        '4': { label: '查看', method: this.handleView, hasAuth: true },
      }
      const actionList = [stateByBtn[row.state] || {}];
      return getTableAction({ h, row, actionList, showBtn: this.showBtn })
    },
    // 获取查询入参
    getFormSearchParams () {
      const { nowPage, pageShow } = this.pagination;
      const searchParam = getSearchParamBySearchType(FORM_ITEMS, this.formData);
      if (this.$route?.query?.todoState) {
        const { todoState } = this.$route?.query;
        searchParam.push({ name: 'todoState', value: todoState });
      }
      return {
        searchParam: JSON.stringify(searchParam),
        nowPage,
        pageShow
      }
    },
    async getTableData () {
      sessionStorage.setItem('buttonId', getBtnsId('查询'));
      const data = this.getFormSearchParams();
      const retData = await queryPriceAdjustmentListService(
        data,
        state => { this.tableInfo.loading = state }
      );
      if (retData) {
        this.tableInfo.list = retData?.results;
        this.pagination.totalNum = retData.totalNum;
      }
    },
    // 新增
    handleAdd () {
      sessionStorage.setItem('buttonId', getBtnsId('新增'));
      this.$router.push({ name: 'modifyManageAdd' });
    },
    // 导出
    handleExport () {
      sessionStorage.setItem('buttonId', getBtnsId('导出'));
      this.exportData();
    },
    // 处理
    handleDispose (row) {
      sessionStorage.setItem('buttonId', getBtnsId('处理'));
      this.skipToRunPage(row.recodeNo, 'deal');
    },
    // 审核
    handleAudit (row) {
      sessionStorage.setItem('buttonId', getBtnsId('审核'));
      this.skipToRunPage(row.recodeNo, 'audit');
    },
    // 查看
    handleView (row) {
      sessionStorage.setItem('buttonId', getBtnsId('查看'));
      this.skipToRunPage(row.recodeNo, 'view');
    },
    // 提交
    handleSubmit (row) {
      this.$confirm('您确认要提交此调价单据吗？', '提示', {
        type: 'warning',
      }).then(() => {
        sessionStorage.setItem('buttonId', getBtnsId('提交'));
        this.submitAdjustInfo(row.recodeNo);
      }).catch(() => {});
    },
    // 提交新增调价信息
    async submitAdjustInfo (recodeNo) {
      const retStatus = await submitPriceAdjustmentService(
        recodeNo,
        state => { this.tableInfo.loading = state }
      );
      if (retStatus) {
        this.$message.success('提交成功');
        this.getTableData();
      }
    },
    // 跳转执行页面
    skipToRunPage (recodeNo, type) {
      this.$router.push({
        name: 'modifyManageView',
        query: { recodeNo, type }
      })
    },
    // 导出数据
    async exportData () {
      const searchParam = JSON.stringify(
        getSearchParamBySearchType(FORM_ITEMS, this.formData)
      );
      const res = await exportPriceAdjustmentService(
        { searchParam },
        state => { this.btnLoading.export = state; }
      );
      createExcelByExport({ res, excelTitle: `调价通知单列表_${generateUuid()}` });
    }
  }
}
</script>
